import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Input,
  Space,
  Upload,
  Radio,
  Modal,
  message,
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import Channels from '@/components/Channels'
// 引入在线文本编辑器处理内容
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { modules } from '@/api/constants'
// 导入在线文本编辑器的详细配置项
import styles from './index.module.scss'
import { useEffect, useRef, useState } from 'react'
import { baseURL } from '@/utils/request'
import {
  addArticleApi,
  getArticleDetailApi,
  editArticleApi,
} from '@/api/articles'
import { useNavigate, useSearchParams } from 'react-router-dom'
// 将图片对象转成base64格式进行预览
const getBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject(error)
  })

export default function ArticlePublish() {
  // 获取id: 如果是通过修改跳转过来的,id是正常的id值，如果是添加文章,id为null
  const [searchParams] = useSearchParams()
  const id = searchParams.get('id')

  // 获取文章详情数据
  useEffect(() => {
    const getArticleDetail = async () => {
      const { data } = await getArticleDetailApi(id)
      console.log(data)
      // 处理表单需要回显的字段的数据
      const values = {
        ...data,
        type: data.cover.type,
      }
      // 数据回显:通过表单对象的setFieldsValue()
      formRef.current.setFieldsValue(values)
      // 图片的回显
      // 图片格式: [{url:''}]
      setFileList(data.cover.images.map((item) => ({ url: item })))
    }
    // id有，代表才是修改操作
    if (id) {
      getArticleDetail()
    }
  }, [id])

  // 定义ref绑定表单组件
  const formRef = useRef(null)
  // message提示的方法之一
  // const [messageApi, contextHolder] = message.useMessage()

  const navigate = useNavigate()
  // 定义封面类型
  const [type, setType] = useState(1)
  // 定义上传的文件对象
  const [fileList, setFileList] = useState([
    /*  {
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }, */
  ])

  // 改变封面类型
  const changeType = (e) => {
    setType(e.target.value)
    // 切换类型时，先清空文件列表，再让用户进行选择
    setFileList([])
  }
  // 图片上传到服务器之前的校验：已经上传到本地
  const beforeUpload = (file) => {
    // 判断图片的大小 不能超过 500k
    if (file.size > 1024 * 500) {
      /* messageApi.open({
        type: 'error',
        content: '只上传的文件不能超过500kb',
      }) */
      message.error({
        content: '只上传的文件不能超过500kb',
      })
      return Upload.LIST_IGNORE
    }
    const mineTypes = ['image/jpeg', 'image/png', 'image/gif']
    if (!mineTypes.includes(file.type)) {
      /* messageApi.open({
        type: 'error',
        content: '只能上传png或者jpg图片',
      }) */
      // message的Promise接口的方式
      message.error({
        content: '只能上传png或者jpg图片',
      })
      return Upload.LIST_IGNORE
    }
  }

  // 上传图片
  const handleChange = ({ fileList }) => {
    setFileList(fileList)
  }

  // 定义预览相关
  const [previewOpen, setPreviewOpen] = useState(false)
  const [previewImage, setPreviewImage] = useState('')
  // 图片预览
  const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj)
    }
    // 图片的格式：一种是原有的url格式的，还有一种是刚上传的本地的图片格式
    setPreviewImage(file.url || file.preview)
    // 打开模态框
    setPreviewOpen(true)
  }
  const handleCancel = () => setPreviewOpen(false)

  // 提取公共的添加文章的方法
  const save = async (values, draft) => {
    // 图片数据:自己上传的图片对象是item.response.data.url,回显的图片对象是item.url
    const images = fileList.map((item) => item.url || item.response.data.url)
    // 图片上传张数的判断
    if (images.length !== values.type) {
      message.warning({
        content: `必须上传${values.type}张图片`,
      })
      return
    }
    // 组装接口数据
    const data = {
      ...values,
      cover: {
        type: values.type,
        images,
      },
    }
    // 根据id判断是修改操作还是添加操作
    if (id) {
      // 修改
      await editArticleApi(data, id, draft)
      message.success({
        content: draft ? '存草稿成功' : '修改成功',
        duration: 1,
        onClose() {
          navigate('/list')
        },
      })
    } else {
      // 添加
      await addArticleApi(data, draft)
      message.success({
        content: draft ? '存草稿成功' : '添加成功',
        duration: 1,
        onClose() {
          navigate('/list')
        },
      })
    }
  }

  // 发布文章
  const editArticle = async (values) => {
    save(values, false)
  }
  // 存草稿
  const editDraft = async () => {
    try {
      // 手动去触发表单的校验方法,一旦校验通过，可以获取到表单的输入项内容
      const values = await formRef.current.validateFields()
      save(values, true)
    } catch (error) {
      error.errorFields.forEach((item) => {
        // console.log(item.errors[0])
        message.error({
          content: item.errors[0],
        })
      })
    }
  }

  return (
    <div className={styles.root}>
      {/* {contextHolder} */}
      <Card
        title={
          <Breadcrumb
            separator=">"
            items={[
              {
                title: '首页',
                href: '/index',
              },
              {
                title: id ? '编辑文章' : '发布文章',
              },
            ]}
          />
        }
      >
        <Form
          ref={formRef}
          labelCol={{ span: 4 }}
          onFinish={editArticle}
          initialValues={{ type: 1 }}
        >
          <Form.Item
            label="标题"
            name="title"
            validateTrigger={['onBlur']}
            rules={[{ required: true, message: '文章的标题不能为空' }]}
          >
            <Input
              placeholder="请输入文章标题"
              style={{
                width: 400,
              }}
            />
          </Form.Item>
          <Form.Item
            label="频道"
            name="channel_id"
            rules={[{ required: true, message: '请选择频道' }]}
          >
            <Channels></Channels>
          </Form.Item>
          {/* 预留着：图片上传 */}
          <Form.Item label="封面" name="type">
            {/* 封面类型 */}
            <Radio.Group onChange={changeType}>
              <Radio value={1}>单图</Radio>
              <Radio value={3}>三图</Radio>
              <Radio value={0}>无图</Radio>
            </Radio.Group>
          </Form.Item>
          {type !== 0 && (
            <Form.Item wrapperCol={{ offset: 4 }}>
              <Upload
                className="upload"
                action={`${baseURL}upload`}
                listType="picture-card"
                fileList={fileList}
                onPreview={handlePreview}
                onChange={handleChange}
                beforeUpload={beforeUpload}
                // name名称必须和action接口要求的name一致
                name="image"
              >
                {fileList.length < type && <PlusOutlined />}
              </Upload>
              <Modal open={previewOpen} footer={null} onCancel={handleCancel}>
                <img
                  alt=""
                  style={{
                    width: '100%',
                  }}
                  src={previewImage}
                />
              </Modal>
            </Form.Item>
          )}

          {/* 内容：在线文本编辑器 */}
          <Form.Item
            label="内容"
            name="content"
            rules={[{ required: true, message: '文章的内容不能为空' }]}
          >
            <ReactQuill
              modules={modules}
              theme="snow"
              placeholder="请输入文章内容"
            ></ReactQuill>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button type="primary" htmlType="submit" size="large">
                {id ? '修改文章' : '发布文章'}
              </Button>
              <Button size="large" onClick={editDraft}>
                存入草稿
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
